<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Welcome to Vue</title>
</head>
<style>
    body {
        padding: 20px 100px;
    }
 
    #lapp,
    #rapp {
        width: 350px;
        height: 500px;
        background-color: #ccc;
        float: left;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
    }
 
    li {
        list-style: none;
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin-left: 10px;
        /* background-color: red; */
        display: none;
    }
 
    .btnBox {
        float: left;
        height: 500px;
        width: 100px;
        display: flex;
        align-items: center;
 
    }
 
    button {
        width: 100%;
        height: 40px;
    }
 
    input {
        width: 18px;
        height: 18px;
    }
 
    u {
        float: right;
        text-decoration: none;
        color: red;
    }
    footer{
        position: absolute;
        right: 20%;
        top: 40%;
    }
</style>
 
<body>
    <div id="lapp">
        <input class="allsunleft" type="checkbox">全选
        <u class="letu">信息数量：0</u>
        <hr>
        <ul class="ltul">
            <!-- <li><input type="checkbox"><span>：达瓦达瓦大</span></li> -->
        </ul>
 
    </div>
    <div class="btnBox">
        <button class="letfBtn">
            <</button>
 
 
                <button class="rBtnight">></button>
    </div>
 
    <div id="rapp">
        <input class="allsunright" type="checkbox">全选
        <u class="letu2">信息数量：0</u>
        <hr>
 
        <ul class="ltul2">
            <!-- <li><input type="checkbox"><span>：达瓦达瓦大</span></li> -->
        </ul>
    </div>
 
    <footer>
        <h1>孙<br>志<br>豪</h1>
            <h5>穿梭门</h5>
    </footer>
</body>
<script src="./js/axios.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/element.js"></script>
<script src="./js/jquery-1.12.3.js"></script>   <!--jQuery 引入依赖jqy  -->
<script>
    var obj = [{
        bool: true,
        cont: "志豪你好啊帅哥1"
    },
    {
        bool: true,
        cont: "志豪你好啊帅哥2"
    },
    {
        bool: true,
        cont: "志豪你好啊帅哥3"
    },
    {
        bool: false,
        cont: "志豪你好啊帅哥4"
    },
    {
        bool: false,
        cont: "志豪你好啊帅哥5"
    },
     {
        bool: true,
        cont: "志豪你好啊帅哥6"
    },
    ]
 
    function render() {
        $('ul').empty()
 
        obj.forEach((element, i) => {
            if (element.bool == true) {  // 孙志豪手写盗版必追
                $('.ltul').append(`               
                <li data-id="${i}" ><input class="fxleft" type="checkbox"><span>：${element.cont}</span></li>
                `)
            } else if (element.bool == false) {
                $('.ltul2').append(`
                <li data-id="${i}"><input class="fxright"  type="checkbox"><span>：${element.cont}</span></li>
                `)
            }
 
        });
        $('.letu').html(`信息数量：${$('.ltul li').length}`)
        $('.letu2').html(`信息数量：${$('.ltul2 li').length}`)
        console.log( $('.ltul2 li').length)
        $('li').slideDown()
    }
    render()
 
    $('.ltul').on('click', 'input', function () {  //左边的
        let index = $(this).parent().data('id')
        console.log(index);
        obj[index].bool = false
    })
    $('.rBtnight').click(function () {
        $('.allsunleft').prop('checked',false)
        render()
    })
 
    $('.ltul2').on('click', 'input', function () {  //右边的边的
        let index = $(this).parent().data('id')
        console.log(index);
        obj[index].bool = true
    })
 
    $('.letfBtn').click(function () {
        $('.allsunright').prop('checked',false)
        render()
    })
 
    $('.allsunleft').click(function () {  //全选left
        obj.forEach(function (e) {
            e.bool = false
        })
    })
    $('.allsunright').click(function () {  //全选right
        obj.forEach(function (e) {
            e.bool = true
        })
    })
 
 
    function fn(a, b) {   //   两边全选反选 封装
        $(a).click(function () {
            $(b).prop('checked', $(this).prop('checked'))
        })
        $('ul').on('click', $(b), function () {  //右边的边的
            if ($(`${b}:checked`).length == $(b).length) {
                $(a).prop('checked', true)
            } else {
                $(a).prop('checked', false)
            }
        })
    }
    fn('.allsunleft', '.fxleft')
    fn('.allsunright', '.fxright')
 
 
 
 
</script>
 
</html>